<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				background-color: #000;
				color: #fff;
			}
			.screen{
				position: absolute;
				right: 400px;
				top: 400px;
				perspective: 400px;
				animation: wave 2s cubic-bezier(.65,0,.39,1) infinite alternate;
			}
			@keyframes wave{
				from{transform: translate(0,0);}
				to{transform: translate(0,50px);}
			}
			.wrapper{
				position: absolute;
				width: 400px;
				height: 300px;
				transform:translate(-50%,-50%) rotateY(-25deg);
				background-color: #ffffff09;
				border: 1px solid #ffffff33;
				border-radius: 10px;
				font-size: 40px;
				text-align: center;
				box-sizing: border-box;
				padding-top: 30px;
				overflow: hidden;
				transition: box-shadow .2s;
			}
			.wrapper::before{
				content: "";
				position: absolute;
				left: 10px;
				top: 10px;
				width: 100px;
				height: 50px;
				border: 1px solid transparent;
				border-color: #fff transparent transparent #fff;				
				border-radius: 10px;
			}
			.wrapper::after{
				content: "";
				position: absolute;
				right: 10px;
				bottom: 10px;
				width: 70px;
				height: 150px;
				border: 1px solid transparent;
				border-color: transparent #fff #fff transparent;				
				border-radius: 10px;
			}
			.shining{
				position: absolute;
				left: -250px;
				top: -100px;
				width: 700px;
				height: 25px;
				background-color: rgba(255,255,255,.1);
				transform-origin: left;
				transform: rotate(60deg);
			}
			.wrapper:hover{
				box-shadow: 0 0 2px #fff, 0 0 25px rgba(255,255,255,.6), 0 0 65px rgba(255,255,255,.3), 0 0 10px rgba(255,255,255,.6) inset;
			}
			.wrapper:hover .shining{
				transition: .3s;
				left: 400px;
			}
			.shadow{
				position: absolute;
				right: 400px;
				top: 700px;
				display: flex;
				justify-content: center;
				align-items: center;
				animation: boom 2s cubic-bezier(.65,0,.39,1) infinite alternate;
			}
			@keyframes boom{
				from{transform: scale(.5);}
				to{transform: scale(1);}
			}
			.main{
				position: absolute;
				top: 0;
				left: 0;
				width: 300px;
				height: 40px;
				background-color: #9a9a9a;
				transform: translate(-50%,-50%) rotate(12deg);
				border-radius: 50%;
				filter: blur(40px);
				stop-opacity: .6;
			}
		</style>
	</head>
	<body>
		<div class="screen">
			<div id="wrapper" class="wrapper">
				TITLE
				<div class="shining"></div>
			</div>
		</div>
		<div id="shadow" class="shadow">
			<div class="main"></div>
		</div>
		<div class="star">
			
		</div>
		<script type="text/javascript">
			window.addEventListener("mousemove",()=>{
				var xBit = event.clientX / window.innerWidth - .5
				var yBit = event.clientY / window.innerHeight - .5
				wrapper.style.transform = `translate(-50%,-50%) rotateY(${-25 + xBit * 16}deg) rotateX(${ -yBit * 16}deg)`
			})
		</script>
	</body>
</html>
